<template>
  <div class="expert">
    <Header />
    <template v-if="isLandHeader">
      <LandHeader @changeState="changeState" nameType="专家篇" />
      <div class="banner" v-if="state === 0">
        <img v-if="banner_List.length" :src="banner_List[0].image" alt="">
      </div>
      <!-- 控制台 -->
      <Workbench
        v-if="state === 0"
        :waiting_num="waiting_num"
        :update_pre_num="update_pre_num"
        @changeState="changeState"
        @changeOnline="changeOnline"
      />
      <!-- 修改处方 -->
      <UpdatePre 
        v-if="state === 1"
        :updatePreList="updatePreList" 
        @changeState="changeState" 
      />
      <!-- 查看处方详情 -->
      <DisposeInfo 
        v-if="state === 2"
        :pCode="pCode" 
        @changeState="changeState" 
      />
      <ModifyPre 
        v-if="state === 3"
        :pCode="pCode" 
        @changeState="changeState" 
      />
      <Footer />
    </template>
    <template v-else>
      <OnlineInquiry
        :userMessage="userMessage"
        @changeOnline="changeOnline"
        @sendMessage="sendMessage"
        :inquiryDtails="inquiryDtails"
      />
    </template>
  </div>
</template>

<script>
import Header from "@/components/home_repect/header-top.vue";
import Footer from "@/components/public/public_bottom.vue";
import LandHeader from "@/components/home_repect/header.vue";
import Workbench from "./workbench"; // 控制台
import UpdatePre from "./updatePre"; // 修改处方
import DisposeInfo from "./disposeInfo"; // 查看处方详情
import OnlineInquiry from "./online_inquiry/main";
import ModifyPre from "./modifyPre";

// 获取医师审核过的处方列表
import { getDoctorAuditList } from "@/request/personnel";
// 获取问诊列表
import { getInquiryList } from "@/request/personnel";
// 获取问诊的详情
import { getInquiryDoctorInfo } from "@/request/personnel";
// 获取自己添加的问诊处方单信息
import { getPrescriptionList } from "@/request/personnel";
// 获取轮播列表
import { banner } from "@/request/index";

export default {
  data() {
    return {
      state: 0,
      isLandHeader: true,
      userMessage: {},
      waiting_num: 0, // 当前等待人数
      update_pre_num: 0, // 待修改审方数
      inquiryDtails: "", // 患者的详细信息
      updatePreList: "", // 医生的待修改处方列表
      pCode: "", // 处方单号
      banner_List: [] // 处方图片
    };
  },
  components: {
    Header,
    Footer,
    LandHeader,
    Workbench,
    UpdatePre,
    DisposeInfo,
    OnlineInquiry,
    ModifyPre
  },
  created() {
    // 医生进入首页就连接socket
    this.initWebSocket();

    // 医师审核过的处方列表
    getDoctorAuditList({
      token: this.$token
    });

    // 获取图片列表
    banner({
      position_id: 1
    }).then(res => {
      this.banner_List = res.data;
      console.log(this.banner_List)
    });

    // 获取图片列表
    banner({
      position_id: 1
    }).then(res => {
      this.banner_List = res.data;
      console.log(this.banner_List)
    });

    // 获取问诊列表， 这个应该隔段时间就执行一次
    getInquiryList({
      token: this.$token
    });

    // 获取自己添加的问诊处方单信息
    getPrescriptionList({
      token: this.$token,
      status_str: "0,1,3" // 包括待审核、医生已签字、药师已拒绝
    }).then(res => {
      this.updatePreList = res.data.data;
      this.update_pre_num = res.data.data.length;
      console.log(res);
    });

    // 获取问诊详情
    getInquiryDoctorInfo({
      token: this.$token,
      inquiry_doctor_id: 21
    }).then(res => {
      this.inquiryDtails = res.data;
      console.log(res);
    });
  },
  destroyed() {
    // 离开首页关闭socket
    this.websocketclose();
  },
  methods: {
    changeState(num, pCode) {
      this.state = num;
      if(num == 2 || num == 3) {
        this.pCode = pCode;
      } 
    },
    changeOnline(isShow) {
      this.isLandHeader = isShow;
      // 医生接受问诊时触发
      let set_inquiry = {
        method: "set_inquiry",
        data: {
          inquiry_doctor_id: 26, // 医生问诊记录id
          chat_status: 1
        }
      };
      this.websocketsend(JSON.stringify(set_inquiry));
      // 医生进入聊天室，紧接着触发
      let chat_in = {
        method: "chat_in",
        data: {
          inquiry_doctor_id: 26,
          inquiry_id: 21
        }
      };
      this.websocketsend(JSON.stringify(chat_in));
    },
    sendMessage(msg) {
      // 代理子组件发送消息

      let chat_message = {
        method: "chat_message",
        data: {
          inquiry_id: 21,
          inquiry_doctor_id: 26,
          to_uid: 21,
          [msg.includes("http://lianzhong.jzbwlkj.com/upload/")
            ? "send_img"
            : "send_text"]: msg
        }
      };
      this.websocketsend(JSON.stringify(chat_message));
    },
    initWebSocket() {
      //初始化websocket
      const wsuri = "ws://lianzhong_ws.jzbwlkj.com";
      this.websock = new WebSocket(wsuri);
      // onopen 建立连接成功后执行的方法
      this.websock.onopen = this.websocketonopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
      // 心跳
      setInterval(() => {
        this.websocketsend({
          method: "ping"
        });
      }, 3000);
    },
    websocketonopen() {
      // 连接建立之后执行send方法发送数据
      // this.websocketsend();
      // this.userlogin();
    },
    websocketonerror() {
      // 连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) {
      // 数据接收
      const redata = JSON.parse(e.data);
      // 更新等待人数
      if (redata.result) this.waiting_num = redata.result.waiting_num;
      // console.log(redata);
      // 消息传递过来，且不是空信息。
      if (redata.result && redata.result.message) {
        this.userMessage = redata;
      }
      // 处理消息
      switch (redata.method) {
        // 登陆用户
        case "sys":
          this.userlogin();
          break;
      }
    },
    userlogin() {
      let actions = {
        method: "login",
        token:
          "f0f307c819807316399130a544bd1198bd9bc159c34432724ce96ab6272a4758"
      };
      this.websocketsend(JSON.stringify(actions));
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    }
  }
};
</script>

<style lang="less" scoped>
.banner {
  height: 512px;
  min-width: 1200px;
  img {
    height: 512px;
    width: 100%;
    min-width: 1200px;
  }
}
</style>